<template>
  <div class="bug-time-container">
    <div class="bug-time-container__title">{{ props.title }}</div>
    <div class="bug-time-container__timer">
      <div class="bug-time-container__timer-num">{{ props.number }} h</div>
      <div class="bug-time-container__timer-base">基线 {{ props.base }} h</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const props = defineProps({
    title: {
      type: String,
      default: '',
    },
    number: {
      type: Number,
      default: 0,
    },
    base: {
      type: Number,
      default: 0,
    },
  });
</script>

<style lang="less" scoped>
  .bug-time-container {
    display: flex;
    align-items: center;
    .bug-time-container__title {
      flex: 1;
      font-size: 18px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .bug-time-container__timer {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .bug-time-container__timer-num {
        font-size: 24px;
        font-weight: bold;
      }
      .bug-time-container__timer-base {
        font-size: 14px;
        color: red;
      }
    }
  }
</style>
